<template>
   <div>
  
    <van-search
    v-model="value"
    shape="round"
    background="#4fc08d"
    placeholder="请输入歌曲关键词" @search="onSearch"
    />

    <aplayer autoplay
  :music="songsData[0]||playmusic"
  :list="songsData" :repeat="flag"
/>

    
   
   </div>
</template>

<script>
import datas from "../../utils/searchsong"
import Aplayer from 'vue-aplayer'
export default {
    name:"music",
    components:{
        Aplayer
    },
    data(){
        return{
            playmusic:{
                title: '选择歌曲',
                artist: '未知',
                src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
                pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
            },
            value:"",
            songsData:[
            ],
            flag:"repeat-all",
        }
    },
    methods:{
        onSearch(value){ 
       var songUrl="/apis/soso/fcgi-bin/client_search_cp?catZhida=1&p=1&n=4&w="+this.value+"&loginUin=2211207925&hostUin=0&format=json"
            this.songsData = datas.getSongMedial(songUrl);
            setTimeout(()=>{
               this.songsData=this.songsData.map((value,index)=>{
                    console.log(value)
                    return {
                            title:value.obj.songMessage.songname,  //desUrl
                            artist: value.obj.songMessage.singer[0].name,
                            src: '/music/'+value.desUrl,
                            pic: value.obj.songMessage.photoUrl
                            }
                })
            },1000)
           
        }

    },
    mounted(){
       
    }
}
</script>

<style>

</style>